<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>查看合同订单</title>
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<script src="${ctxStatic}/js/jquery-1.9.1.min.js"></script>
<script src="${ctxStatic}/js/DateTimePicker.js"></script>
<script src="${ctxStatic}/js/layer.js"></script>
<script src="${ctxStatic}/js/style.js"></script>
<script src="${ctxStatic}/jquery-barcode/jquery-barcode.js" type="text/javascript"></script>
<link rel="stylesheet" href="${ctxStatic}/css/common.css">
<link rel="stylesheet" href="${ctxStatic}/css/layerSm.css">
<script type="text/javascript">
	$(document).ready(function(){
    	$("#materialBarCodeDiv").empty().barcode($("#materialBarCode").val(), "code128",{barWidth:2, barHeight:30,showHRI:false});
 	});
	$(function() {
		$(".tabBox ul li").each(
			function() {
			var index = $(this).index();
			$(".tabBox ul li").eq(0).addClass("active");
			$(this).click(function() {
				$(this).addClass("active").siblings()
						.removeClass("active");
				$(".tabBoxSm > .tabSm").eq(index).stop(true)
						.show().siblings().stop(true).hide();
				var tableW = $(".tabBoxSm > .tabSm").eq(index)
						.find('.tableHead').width();
				var tabodyH = $(".tabBoxSm > .tabSm").eq(index)
						.find('.tableBody').height();
				var tableScrollH = $(".tabBoxSm > .tabSm").eq(
						index).find('.tableScrollSm').height();
				if (tabodyH > tableScrollH) {
					$(".tabBoxSm > .tabSm").eq(index).find(
							'.tableScrollSm').css('width',
							tableW + 18 + 'px')
				} else {
					$(".tabBoxSm > .tabSm").eq(index).find(
							'.tableScrollSm').css('width',
							'990px')
				}
			})
		})
	})
	
	function saveRemarks(obj){
		var params = {
			inventoryDetailID : $(obj).attr("data-value"),
			remarks : $(obj).val()
		};
		$.post("${ctx}/material/stock/saveRemarks", params, function(result) {
			if (result == "true") {
				// 提示信息
				tipParent("保存成功");
			}else{
				// 提示信息
				tipParent("保存失败");
			}
			// 返回状态
		}, 'json');
	}
</script>
<style type="text/css">
.items .tit-g{
	float:left;
	width:91px;
}
</style>
</head>
<body>   
<div class="layerHeader clearfix">
	<p class="headerTitle">入出库明细</p>
    <div class="headerButton clearfix">
        <button type="button" onclick="closeWin()"><spring:message code="btn_cancle"/></button>
    </div>
</div>

<div class="smOrderBox showHtml">
    <div class="items clearfix">
        <div class="col-50 clearfix">
        <!-- 物料编码 -->
            <p class="tit-g">物料编码：</p>
            <label>${material.materialCode }</label>
        </div>
        <div class="col-50 clearfix">
        <!-- 物料条形码 -->
            <p class="tit-g">物料条形码：</p>
            <div id="materialBarCodeDiv"></div>
            <input type="hidden" id="materialBarCode" name="materialBarCode" value="${material.materialBarCode }">
        </div>
    </div>
    <div class="items clearfix">
        <div class="col-50 clearfix">
        <!-- 物料中文名称  -->
            <p class="tit-g">物料中文名称：</p>
            <label>${material.materialNameCn }</label>
        </div>
        <div class="col-50 clearfix">
        <!-- 物料英文名称  -->
            <p class="tit-g">物料英文名称：</p>
            <label>${material.materialNameEn }</label>
        </div>
    </div>
    <div class="items clearfix">        	
         <div class="col-50 clearfix">
         <!-- 业务类别  -->
              <p class="tit-g">业务类别：</p>
              <label></label>
         </div>
         <div class="col-50 clearfix">
         <!-- 库存数量  -->
            <p class="tit-g">库存数量：</p>
            <label><fmt:formatNumber value="${material.materialQuantity }" pattern="#,##0.000#"/></label>
        </div>               
    </div>
</div>
<div class="tabBox" style="background-color: #f1f3f2">
		<ul class="clearfix">
			<li class="active">实际库存</li>
			<li>出入库明细</li>
		</ul>
	</div>
<div class="tabBoxSm" style="margin-top: 5px;">
<div class="tabSm">
<div class="tableArea showHtml" >
    <div class="tableScrollSm" style="height: 420px;overflow: auto;width: 888px;" >
        <table cellpadding="0" class="tableHead">
            <thead>
            <tr>
            	<th><p style="width: 50px;"><spring:message code="common_no" /></p></th>
                <th><p style="width: 270px;">仓库名称</p></th>
                <th><p style="width: 270px;">货架位置</p></th>
                <th><p style="width: 270px;">库存数量</p></th>
            </tr>
            </thead>
        </table>
        <table cellpadding="0" class="tableBody">
            <tbody>
            <c:forEach items="${material.stockList }" var="stock" varStatus="status">
            <tr>
            	<td><p style="width: 50px;">${status.count }</p></td>
                <td><p style="width: 270px;">${stock.inWarehousePlace }</p></td>
                <td><p style="width: 270px;">${stock.inRackPlace }</p></td>
                <td><p style="width: 270px;"><fmt:formatNumber value="${stock.inQuantity-stock.outQuantity}" pattern="#,##0.000#"/></p></td>
            </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
</div>
<div class="tabSm none">
<div class="tableArea" >
    <div class="tableScrollSm" style="height: 420px;overflow: auto;width: 888px;" >
        <table cellpadding="0" class="tableHead">
            <thead>
            <tr>
            	<th><p style="width: 40px;"><spring:message code="common_no" /></p></th>
                <th><p class="width-120px">入出库单号</p></th>
                <th><p class="width-120px">仓库货架</p></th>
                <th><p class="width-80px">入库数量</p></th>
                <th><p class="width-80px">出库数量</p></th>
                <th><p class="width-100px">入出库原因</p></th>
                <th><p class="width-80px">入出库日期</p></th>
                <th><p class="width-80px">经办人员</p></th>
                <th><p class="width-80px">申请日期</p></th>
                <th><p class="width-80px">申请人员</p></th>
            </tr>
            </thead>
        </table>
        <table cellpadding="0" class="tableBody">
            <tbody>
            <c:forEach items="${material.materialList }" var="inOut" varStatus="status">
            <tr>
            	<td><p style="width: 40px;">${status.count }</p></td>
                <td><p class="width-120px">${inOut.inventoryRequestNo }</p></td>
                <td><p class="width-120px">${inOut.inWarehousePlace }<br>${inOut.inRackPlace }</p></td>
                <td><p class="width-80px"><fmt:formatNumber value="${inOut.inQuantity }" pattern="#,##0.000#"/></p></td>
                <td><p class="width-80px"><fmt:formatNumber value="${inOut.outQuantity }" pattern="#,##0.000#"/></p></td>
                <td><textarea class="width-100px" style="height: 50px;" data-value="${inOut.inventoryDetailID }" onblur="saveRemarks(this)">${inOut.remarks }</textarea>
                <%-- <p class="width-100px" data-value="${inOut.inventoryDetailID }">${inOut.remarks }</p> --%></td>
                <td><p class="width-80px"><fmt:formatDate value="${inOut.inOutDate }" pattern="yyyy-MM-dd"/></p></td>
                <td><p class="width-80px">${inOut.inOutUser }</p></td>
                <td><p class="width-80px"><fmt:formatDate value="${inOut.requestDate }" pattern="yyyy-MM-dd"/></p></td>
                <td><p class="width-80px">${inOut.requestUser }</p></td>
            </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
</div>

</div>
<script>

</script>
</body>
</html>
